<template>
  <div class="login">
    <div class="box">
      <p class="title">忘记密码<span>Forget the password</span></p>
      <div class="elinput">
        <img src="../assets/img/login/phone.png"
             class="icon" />
        <input class="inp"
               type="text"
               placeholder="手机号"
               v-model="phone"
               maxlength="11" />
      </div>
      <div class="elinput"
           id="codeid">
        <input class="inp"
               type="text"
               placeholder="验证码"
               v-model="code" />
        <div class="getcode"
             v-if="disabled"
             @click="getcode">获取验证码</div>
        <div class="getcode"
             v-else>{{ count }}s后重试</div>
      </div>
      <div class="elinput">
        <img src="../assets/img/login/pas.png"
             class="icon" />
        <input class="inp"
               type="password"
               placeholder="密码"
               v-model="password" />
      </div>
      <div class="el">
        <span></span>
        <p><span @click="goBack">返回上级</span></p>
      </div>
      <div class="btn"
           style="margin-top: 80px"
           @click="setPasw">修改密码</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "forgetpasw",
  data () {
    return {
      phone: "",
      password: "",
      code: "",
      disabled: true,
      count: 0,
      interval: undefined, // 定时器
    };
  },
  methods: {
    goBack () {
      this.$router.go(-1);
    },
    // 获取验证码
    getcode () {
      this.disabled = false;
      this.count = 60;
      this.interval = setInterval(() => {
        this.count--;
        if (this.count == 0) {
          clearInterval(this.interval);
          this.disabled = true;
        }
      }, 1000);
    },
    setPasw () {
      var tellreg = /^1[0-9]{10}$/;
      if (this.password == "" || this.phone == "" || this.code == "") {
        this.$message({
          message: "内容不允许有空，请填写完整信息",
          type: "warning",
        });
      } else if (!tellreg.test(this.phone)) {
        this.$message({
          message: "手机号错误，请检查后重新填写",
          type: "warning",
        });
      } else {
        console.log(this.phone, this.code, this.password);
      }
    },
  },
  beforeDestroy () {
    // 清除定时器
    if (this.interval) {
      clearInterval(this.interval);
    }
  },
};
</script>
<style lang="scss" scoped>
@import url(../assets/css/login.css);
</style>